<template>
	<div>
		<header class="aui-header">
			<a class="aui-pull-left aui-btn">
			</a>
			<div class="aui-title">京选友惠</div>
			<div class="rightbut"></div>
		</header>
		<div class="picCarousel">
			<mt-swipe :auto="4000">
				<mt-swipe-item v-for="item in data.banner"><img :src="item" class="silderimg"></mt-swipe-item>

			</mt-swipe>
		</div>
		<div class="activeimg"><img :src="data.bannerTip"></div>

		<div class="goodinfo">
			<div class="goodname">{{data.goodsName}}</div>
			<div class="goodpricecon">
				<span class="saleprice"><i class="priceSymbol">￥</i>{{data.conPrice}}</span>
				<span class="masterprice">￥{{data.price}}</span>
				<span class="earnmoney">赚{{data.wlCommission}}</span>
			</div>
			<div class="goodsware">
				<span class="freefreight" v-if="data.isFreePost == 1">免运费</span>
				<span class="freefreight" v-else-if="data.isFreePost == 0">不包邮</span>
				<span class="salename">销量{{data.totalSales}}件</span>
			</div>
			<ul class="serviceguareen">
				<li class="sameservce" v-if="data.isQualityAssurance == 1"><i class="sameservceimg"></i><span class="sameservce-name">正品保证</span></li>
				<li class="sameservce" v-else-if="data.isQualityAssurance == 0" style="display: none;"><i class="sameservceimg"></i><span class="sameservce-name">正品保证</span></li>
				<li class="sameservce" v-if="data.isServenBack == 1"><i class="sameservceimg"></i><span class="sameservce-name">七天退换货</span></li>
				<li class="sameservce" v-if="data.isServenBack == 0" style="display: none;"><i class="sameservceimg"></i><span class="sameservce-name">七天退换货</span></li>
				<li class="sameservce" v-if="data.isOnTime == 1"><i class="sameservceimg"></i><span class="sameservce-name">准时达</span></li>
				<li class="sameservce" v-if="data.isOnTime == 0" style="display: none;"><i class="sameservceimg"></i><span class="sameservce-name">准时达</span></li>
			</ul>

		</div>

		<div class="procategory" v-if="data.isCanBuy == 'yes'" style="display: none;">
			<img src="http://file.jhjvip.cn/images/e445e29b-2fde-4efc-bdb7-60daa00462a9.jpg">
		</div>
		<div class="procategory" v-else-if="data.isCanBuy == 'no'">
			<img :src="data.buyTip">
		</div>
		<div class="samecoupon fullout" style="display: none;">
			<span class="samecoupon-title">优惠券</span>
			<span class="samecoupon-text">领取优惠券</span>
			<i class="samecoupon-right"></i>
		</div>
		<div class="addcoupn">
			<div class="samecoupon" v-for="item in data.fullcuts">
				<span class="samecoupon-title">优惠券</span>
				<span class="samecoupon-text">{{item.name}}</span>
				<i class="samecoupon-right"></i>
			</div>
		</div>
		<div class="samecoupon fullout" v-on:click="buyEvent()">

			<span class="samecoupon-text">选择 {{data.propertyNames}}</span>
			<i class="samecoupon-right"></i>
		</div>

		<mu-tabs :value="activeTab" @change="handleTabChange">
			<mu-tab value="tab1" title="商品介绍" />
			<mu-tab value="tab2" title="规格参数" />
			<mu-tab value="tab3" @active="handleActive" title="宝贝评价" />
		</mu-tabs>
		<div v-if="activeTab === 'tab1'">
			<div class="prodetailimg" v-for="item in data.detailImages">
				<img :src="item" alt="">

			</div>
		</div>
		<div v-if="activeTab === 'tab2'">
			<div class="specpara">
				<ul class="specpara-ul">
					<li class="samespec-li" v-for="item in data.specs">
						<span class="spectitle">{{item.name}}</span>
						<label class="specfont">{{item.value}}</label>
					</li>
				</ul>
			</div>
		</div>
		<div v-if="activeTab === 'tab3'">
			<div class="evalutemodule">
				<ul>
					<li :class="current" v-on:click="evalbut('all')">全部({{judge.total}})</li>
					<li v-on:click="evalbut('image')">有图({{judge.imageTotal}})</li>
				</ul>
			</div>
			<div class="assessmain">
				<ul>
					<li class="sameassess-li" v-for="item in judge.list">
						<div class="userinfo">
							<div class="username">
								<div class="userimg"><img :src="item.userHeadImg"></div>
								<span class="userfont">{{item.userNickName}}</span>
							</div>
							<div class="gradecon">
								<i class="praisegrade" v-for="(key,val) in data.descLevel"></i>

							</div>
						</div>
						<label class="assessdate">{{item.createTime}}</label>
						<span class="goodevalute">{{item.content}}</span>
						<div class="goodpic">
							<div class="samegoodimg" v-for="imgObj in item.img"><img :src="imgObj"></div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<div class="footer">
			<div class="otreh-handle">
				<a class="kefu">
					<i></i>
					<p>客服</p>
				</a>
				<a class="love">
					<i></i>
					<p>收藏</p>
				</a>
				<a class="shopcart">
					<i></i>
					<p>购物车</p>
				</a>
			</div>
			<div class="buy-handle">

				<a class="buy-now">立即购买</a>
			</div>
		</div>
		<div class="nctouch-bottom-mask" v-show="isShow">
			<div class="nctouch-bottom-mask-bg"></div>
			<div class="nctouch-bottom-mask-block">
				<div class="goods-options-info">
					<div class="goodspic"><img :src="goodstype.sku.skuImage"></div>
					<div class="goodstock">
						<span class="goodsprice">￥{{goodstype.sku.price}}</span>
						<span class="samegoodsty">库存{{goodstype.sku.inventory}}件</span>
						<span class="samegoodsty">已选 "L" "卡其"</span>
					</div>
					<div class="closebut" v-on:click="hidemask()">X</div>
				</div>
				<div class="nctouch-bottom-mask-rolling">
					<div class="goods-options-stock">

						<dl class="spec"  v-for="(item,i) in goodstype.propertys" :key="i">
							<dt>{{item.propertyName}}</dt>
							<dd>
								<!--<a class="currents">白色</a>-->
								<a v-for="(fontObj,index) in item.propertyValues" :class="{'currents':index == select[i]}" @click="protypebut(index,i)">{{fontObj.value}}</a>
							</dd>

						</dl>
		
						<!--<dl class="spec">
							<dt>尺码</dt>
							<dd>
								<a class="currents">M</a>
								<a>L</a>
								<a>XL</a>
							</dd>
						</dl>-->
					</div>
				</div>
				<div class="goods-option-value">购买数量
					<div class="value-box">
						<span class="minus" @click="subtractbut()"><a></a></span>
						<span class="buyval"><input type="text" class="buy-num" value="1" ref="buynum"></span>
						<span class="add" @click="addstock(goodstype.sku.inventory)"></span>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	export default {
		data() {
			return {
				activeTab: 'tab1',
				isShow: false,
				data: [],
				judge: [],
				picimg: [],
				goodstype: [],
				current: true,
				select: [0,0,0],
				
			}

		},
		created() {
			var url = "http://develop.jhjvip.cn:8080/mall/mobile/yh/detail?id=1";
			this.$http.get(url).then(res => {
				this.data = res.data.data;

				console.log(res.data.data);
			})
			var evalurl = "http://develop.jhjvip.cn:8080/mall/mobile/yh/getSpuFeedbacks?id=1";
			this.$http.get(evalurl).then(res => {
				var json = res.data.data.list;
				for(var i = 0; i < json.length; i++) {
					var img = json[i].images.split(',');
					json[i].img = img
					//console.log(json[i].images)
				}
				this.judge = res.data.data;
				console.log(this.judge.list);
			})
			var mainsty = "http://develop.jhjvip.cn:8080/mall/mobile/yh/skuPropertys?id=1";
			this.$http.get(mainsty).then(res => {

				this.goodstype = res.data.data;
				console.log(this.goodstype);
			})

		},
		//		computed:{
		//			
		//			a:function(){
		//              this.picimg=this.judge.images.split(',');
		//              console.log(this.picimg)
		//          }
		//
		//		},
		methods: {
			handleTabChange(val) {
				this.activeTab = val

			},
			handleActive() {
				//window.alert('tab active')
			},
			buyEvent: function() {
				//alert('111');
				//$(".nctouch-bottom-mask").show();
				this.isShow = true;
			},
			evalbut: function(obj) {
				alert(obj);
				if(obj == "all") {
					this.setAttribute("class", 'current')
					var evalurl = "http://develop.jhjvip.cn:8080/mall/mobile/yh/getSpuFeedbacks?id=1";
					this.$http.get(evalurl).then(res => {
						var json = res.data.data.list;
						for(var i = 0; i < json.length; i++) {
							var img = json[i].images.split(',');
							json[i].img = img
							//console.log(json[i].images)
						}
						this.judge = res.data.data;
						console.log(this.judge.list);
					})
				} else {
					this.setAttribute("class", 'current')
					var evalurl = "http://develop.jhjvip.cn:8080/mall/mobile/yh/getSpuFeedbacks?id=1&type=image";
					this.$http.get(evalurl).then(res => {
						var json = res.data.data.list;
						for(var i = 0; i < json.length; i++) {
							var img = json[i].images.split(',');
							json[i].img = img
							//console.log(json[i].images)
						}
						this.judge = res.data.data;
						console.log(this.judge.list);
					})
				}
			},
			hidemask: function() {
				this.isShow = false;
			},
			splitimg: function(json) {
				var imgObjs = [];
				this.picimg = json.split(',');
				var length = this.picimg.length;
				for(var i = 0; i < length; i++) {
					var img = this.picimg[i];
					var imgObj = {
						img: img
					}
					imgObjs.push(imgObj);
				}

				return imgObjs;
			},
			protypebut: function(index, i) {
				//alert('11');
				this.select.splice(i,1,index) ;
					
//				alert(obj)
			},
	
			addstock: function(obj) {

				var val = this.$refs.buynum.value;
				if(parseInt(val) < obj) {
					this.$refs.buynum.value = parseInt(val) + 1;
				}

			},
			subtractbut: function() {
				var val = this.$refs.buynum.value;
				if(parseInt(val) > 1) {
					this.$refs.buynum.value = parseInt(val) - 1;
				}
			}

		}
	}
</script>

<style scoped="scoped">
	.silderimg {
		width: 100%;
		height: 100%;
	}
	/********蒙版********/
	
	.nctouch-bottom-mask {
		position: fixed;
		z-index: 20;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
	}
	
	.nctouch-bottom-mask-bg {
		display: block;
		position: absolute;
		z-index: 21;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.65);
	}
	
	.nctouch-bottom-mask-block {
		display: block;
		position: absolute;
		z-index: 22;
		bottom: 0;
		left: 0;
		right: 0;
		min-height: 6.9rem;
		background: #FFF;
	}
	
	.goods-options-info {
		padding: 0.3rem 0.25rem;
		position: relative;
		z-index: 1;
		display: block;
		border-bottom: solid 0.01rem #CCCCCC;
		font-size: 0;
	}
	
	.goodspic {
		display: inline-block;
		z-index: 1;
		top: 0.5rem;
		left: 0.5rem;
		width: 2.2rem;
		height: 2.2rem;
	}
	
	.goodspic>img {
		width: 100%;
		height: 100%;
	}
	
	.goodstock {
		width: 30%;
		height: 2.2rem;
		display: inline-block;
		margin-left: 0.3rem;
	}
	
	.goodsprice {
		display: table;
		font-size: 0.32rem;
		color: #ff2040;
		margin-top: 0.8rem;
	}
	
	.samegoodsty {
		font-size: 0.28rem;
		color: #323232;
		display: table;
	}
	
	.closebut {
		width: 0.6rem;
		height: 0.6rem;
		border: solid 1px #b5b5b5;
		border-radius: 50%;
		display: inline-block;
		float: right;
		font-size: 0.32rem;
		text-align: center;
		line-height: 0.6rem;
	}
	
	.nctouch-bottom-mask-rolling {
		min-height: 1.9rem;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	
	.goods-options-stock {
		padding: 0 0.25rem;
	}
	
	.spec {
		border-bottom: solid 0.01rem #CCCCCC;
	}
	
	.spec>dt {
		display: block;
		height: 0.5rem;
		color: rgb(50, 50, 50);
		font-size: 0.28rem;
		line-height: 0.5rem;
		padding: 0.1rem 0px;
	}
	
	.spec>dd {
		display: block;
		font-size: 0rem;
	}
	
	.spec>dd>a {
		display: inline-block;
		height: 0.45rem;
		line-height: 0.3rem;
		font-size: 0.24rem;
		background: rgb(238, 238, 238);
		border-radius: 0.12rem;
		padding: 0.1rem 0.2rem;
		margin-left: 0.15rem;
		margin-bottom: 0.15rem;
		margin-top: 0.1rem;
		color: #323232;
	}
	
	.currents {
		color: #FFFFFF !important;
		background-color: #FF2040 !important;
	}
	
	.goods-option-value {
		display: block;
		height: 1.2rem;
		padding: 0.25rem;
		margin-bottom: 2rem;
		line-height: 0.8rem;
		color: #323232;
		font-size: 0.28rem;
	}
	
	.value-box {
		display: inline-block;
		float: right;
		font-size: 0;
	}
	
	.minus {
		width: 0.66rem;
		height: 0.6rem;
		/*background: url(../assets/value_minus.png);*/
		background-size: 100%;
		display: inline-block;
	}
	
	.add {
		width: 0.66rem;
		height: 0.6rem;
		/*background: url(../assets/value_add.png);*/
		background-size: 100%;
		display: inline-block;
	}
	
	.buy-num {
		width: 0.6rem;
		height: 0.6rem;
		padding: 0;
		font-size: 0.6rem;
		font-weight: lighter;
		line-height: 0.6rem;
		text-align: center;
		border: solid #eee;
		border-width: 0 0.05rem;
		border-radius: 0;
		background: #eeeeee;
		margin: 0 0.02rem;
		font-size: 0.36rem;
	}
	
	.buyval {
		display: inline-block;
		vertical-align: top;
		line-height: 0;
	}
	/*******/
	
	.aui-header {
		position: fixed;
		z-index: 9;
		top: 0;
		height: 1rem;
		background-color: #FFFFFF;
		color: #323232;
		right: 0;
		left: 0;
		width: 100%;
		font-size: 0.36rem;
		border-bottom: solid 1px #ccc;
	}
	
	.aui-pull-left {
		width: 0.2rem;
		height: 0.36rem;
		display: inline-block;
		/* padding: 0 0.25rem; */
		margin: 0.25rem;
	}
	
	.aui-pull-left>img {
		width: 100%;
		height: 100%;
	}
	
	.aui-title {
		line-height: 1rem;
		display: inline-block;
		margin-left: 2rem;
	}
	
	.rightbut {
		width: 0.43rem;
		height: 0.61rem;
		/*background: url(../assets/navgation.png);*/
		background-size: 100%;
		float: right;
		margin: 0.17rem;
	}
	
	.picCarousel {
		width: 100%;
		height: 6.06rem;
		background: red;
		margin-top: 1rem;
	}
	/*****活动背景*******/
	
	.activeimg {
		width: 100%;
		height: 0.9rem;
	}
	
	.activeimg>img {
		width: 100%;
		height: 100%;
		display: block;
	}
	/*******商品信息**********/
	
	.goodinfo {
		padding: 0.25rem;
		padding-bottom: 0;
		background-color: #FFFFFF;
	}
	
	.goodname {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.32rem;
		color: #323232;
		line-height: 0.4rem;
		/* line-height: 2.5vh; */
	}
	
	.goodpricecon {
		line-height: 0.65rem;
		height: 0.65rem;
	}
	
	.saleprice {
		color: #ff2040;
		font-size: 0.46rem;
		float: left;
	}
	
	.priceSymbol {
		font-size: 0.32rem;
		font-style: normal;
	}
	
	.masterprice {
		font-size: 0.32rem;
		color: #989898;
		text-decoration: line-through;
		margin-left: 0.12rem;
		float: left;
	}
	
	.earnmoney {
		float: right;
		font-size: 0.32rem;
		color: #FF2040;
	}
	
	.goodsware {
		line-height: 0.46rem;
		border-bottom: solid 0.01rem #CCCCCC;
		margin-top: 0.1rem;
		height: 0.46rem;
	}
	
	.freefreight {
		font-size: 0.24rem;
		color: #989898;
		float: left;
	}
	
	.salename {
		font-size: 0.24rem;
		color: #989898;
		float: right;
	}
	
	.serviceguareen {
		width: 100%;
		height: 0.8rem;
	}
	
	.sameservce {
		display: inline-block;
		line-height: 0.8rem;
		width: 25%;
		height: 0.8rem;
		line-height: 0.8rem;
		float: left;
		margin-left: 0.2rem;
	}
	
	.sameservce:nth-child(1) {
		margin-left: 0px;
	}
	
	.sameservceimg {
		width: 0.22rem;
		height: 0.22rem;
		/*background: url(../assets/hook.png);*/
		background-size: 100%;
		display: block;
		margin-top: 0.3rem;
		float: left;
	}
	
	.sameservce-name {
		font-size: 0.24rem;
		float: left;
		margin-left: 0.15rem;
		color: #989898;
	}
	
	.procategory {
		width: 100%;
		height: 0.9rem;
		background-color: #feece9;
		display: flex;
	}
	
	.procategory>img {
		width: 100%;
		height: 100%;
	}
	
	.salepic {
		width: 0.56rem;
		height: 0.56rem;
		background: red;
		margin: 0.18rem;
	}
	
	.salepro {
		font-size: 0.25rem;
		color: #f10136;
		line-height: 0.9rem;
	}
	
	.samecoupon {
		padding: 0.25rem;
		background: #FFFFFF;
		border-bottom: solid 0.01rem #CCCCCC;
		height: 0.9rem;
		display: flow-root;
	}
	
	.samecoupon:first-child {
		margin-top: 0.16rem;
	}
	
	.fullout {
		margin-top: 0.16rem;
	}
	
	.samecoupon-title {
		color: #FF2040;
		font-size: 0.24rem;
		border: solid 0.01rem #FF2040;
		padding: 0.03rem 0.1rem;
		border-radius: 0.05rem;
		float: left;
	}
	
	.samecoupon-text {
		color: #323232;
		font-size: 0.28rem;
		margin-left: 0.1rem;
		float: left;
	}
	
	.samecoupon-right {
		width: 0.12rem;
		height: 0.21rem;
		/*background: url(../assets/return.png);*/
		background-size: 100%;
		float: right;
		display: block;
	}
	/*****详情图*****/
	
	.mu-tab-link {
		color: #323232;
	}
	
	.mu-tab-active {
		color: #ff2040;
	}
	
	.mu-tabs {
		background-color: #FFFFFF;
		color: #323232 !important;
	}
	
	.prodetailimg {
		width: 100%;
		height: 100%;
	}
	
	.prodetailimg>img {
		width: 100%;
		height: 100%;
	}
	
	.specpara {
		width: 100%;
		height: 100%;
	}
	
	.specpara-ul {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		padding: 0 0.15rem;
	}
	
	.samespec-li {
		width: 100%;
		height: 0.87rem;
		border-bottom: solid 0.01rem #CCCCCC;
		line-height: 0.87rem;
	}
	
	.samespec-li:nth-child(1) {
		border-top: solid 0.01rem #CCCCCC;
	}
	
	.spectitle {
		font-size: 0.28rem;
		color: #989898;
	}
	
	.specfont {
		font-size: 0.28rem;
		color: #323232;
		margin-left: 1rem;
	}
	/*******评价********/
	
	.evalutemodule {
		width: 100%;
		padding: 0.3rem 0.15rem;
		background-color: #FFFFFF;
		border-top: solid 0.01rem #CCCCCC;
	}
	
	.evalutemodule>ul {
		width: 100%;
	}
	
	.evalutemodule>ul>li {
		display: inline-block;
		background-color: #eee;
		padding: 0.05rem 0.25rem;
		border-radius: 0.5rem;
		font-size: 0.24rem;
		margin-left: 0.2rem;
	}
	
	.evalutemodule>ul>li:nth-child(1) {
		margin-left: 0rem;
	}
	
	.current {
		background-color: #ffd2d8 !important;
	}
	/*****评价数据*****/
	
	.assessmain {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	
	.assessmain>ul {
		width: 100%;
	}
	
	.sameassess-li {
		padding: 0.25rem;
		border-top: solid 0.01rem #ccc;
	}
	
	.userimg {
		width: 0.6rem;
		height: 0.6rem;
	}
	
	.userimg>img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.username {
		line-height: 0.6rem;
		display: inline-flex;
		font-size: 0.28rem;
		color: #323232;
	}
	
	.userfont {
		margin-left: 0.1rem;
	}
	
	.gradecon {
		float: right;
		margin-top: 0.25rem;
	}
	
	.praisegrade {
		width: 0.22rem;
		height: 0.2rem;
		display: block;
		/*background: url(../assets/redgrade.png);*/
		background-size: 100%;
		float: left;
		margin-left: 0.07rem;
	}
	
	.assessdate {
		line-height: 0.35rem;
		color: #989898;
		font-size: 0.24rem;
	}
	
	.goodevalute {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.28rem;
		color: #323232;
	}
	
	.goodpic {
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	
	.samegoodimg {
		width: 1.59rem;
		height: 1.59rem;
		background: red;
		margin-left: 0.2rem;
		display: inline-block;
	}
	
	.samegoodimg>img {
		width: 100%;
		height: 100%;
	}
	
	.samegoodimg:nth-child(1) {
		margin-left: 0rem;
	}
	
	.samegoodimg:nth-child(5) {
		margin-left: 0rem;
		margin-top: 0.15rem;
	}
	/*******底部********/
	
	.footer {
		position: fixed;
		width: 100%;
		height: 0.95rem;
		background: #FFFFFF;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 23;
	}
	
	.otreh-handle {
		width: 70%;
		float: left;
		/*background: red;*/
		height: 100%;
		font-size: 0;
	}
	
	.otreh-handle>a {
		position: relative;
		z-index: auto;
		display: inline-block;
		height: 0.95rem;
		text-align: center;
		color: #333;
	}
	
	.otreh-handle>a>i {
		display: block;
		width: 0.38rem;
		height: 0.38rem;
		margin: 0 auto;
		background-repeat: no-repeat;
		/*background-position: 50% 50%;*/
		background-size: 100%;
		opacity: 0.65;
		margin-top: 0.15rem;
	}
	
	.otreh-handle>a>p {
		font-size: 0.24rem;
		color: #989898;
	}
	
	.kefu {
		width: 33%;
	}
	
	.love {
		width: 33%;
	}
	
	.shopcart {
		width: 33%;
	}
	
	.kefu>i {
		/*background: url(../assets/newsimg.png);*/
	}
	
	.love>i {
		/*background: url(../assets/love.png);*/
	}
	
	.shopcart>i {
		/*background: url(../assets/shopcat.png);*/
	}
	
	.buy-handle {
		float: right;
		width: 30%;
		font-size: 0;
		background-color: #ff2040;
	}
	
	.buy-now {
		display: block;
		height: 0.95rem;
		font-size: 0.32rem;
		color: #FFF;
		text-align: center;
		line-height: 0.95rem;
	}
</style>